<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二课笔记</title>
    <style>
    </style>
    <link rel="stylesheet" href="/240326/home/style/step1.css">
    <link rel="stylesheet" href="/240326/home/style/step2.css">
    <link rel="stylesheet" href="/240326/home/style/step3.css">
    <link rel="stylesheet" href="/240326/home/style/step4.css">
    <link rel="stylesheet" href="/240326/home/style/step5.css">
    <link rel="stylesheet" href="/240326/home/style/step6.css">
    <link rel="stylesheet" href="/240326/home/style/step7.css">
    <link rel="stylesheet" href="/240326/home/style/step8.css">
    <style>
        * {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <header class="nav">
        <div class="container container-flex">
            <ul>
                <li><a href="/240326/home/index.html" class="nav-link site-title">个人网站</a></li>
            </ul>
            <ul>
                <li><a href="/240325/resume.html" class="nav-link objection">个人简历</a></li>
                <li><a href="/240326/home/dailynote.html" class="nav-link objection">学习笔记</a></li>
                <li><a href="#" class="nav-link objection">项目经验</a></li>
            </ul>
        </div>
    </header>
    <p>
    <h1>CSS基础语法</h1>
    <br>找到他 {
    <br>&nbsp;&nbsp;&nbsp;改变他什么
    <br>&nbsp;&nbsp;&nbsp;}
    <br>样式判断优先级:属性>层级>底层文件
    <br>class标记用.
    <br>id标记用#
    <br>*:所有元素
    <br>*,*:同时选择
    <br>* * :选择后代
    <br>* > *:选择子代
    <br>* + *:选择相邻兄弟
    <br>* ~ *:选择普通兄弟
    <br>::*:伪元素
    <ul>
        <li>first-letter:首字母</li>
        <img src="first-letter.png" width="400">
        <li>first-line:首行</li>
        <img src="first-line.png" width="400">
        <li>marker:列表标记</li>
        <img src="marker.png" width="400">
        <li>selection:选中部分</li>
        <img src="selection.png" width="400">
        <li>placeholder:文本输入框内文字</li>
        <img src="placeholder.png" width="400">
    </ul>
    <br>*:*:细化选择
    <ul>
        <li>nth-of-type(*):限定选择第*个样式</li>
        <img src="nth-of-type.png" width="400">
    </ul>
    </p>
    <p>color:颜色
        <br>padding:内间距
        <br>margin:外间距
    <ul>
        <li>top,bottom,left,right:上，下，左，右</li>
        <li>简写顺序：上下间距，左右间距</li>
    </ul>
    <br>border:边框
    <br>text_align:文字对齐方式
    <ul>
        <li>left:左对齐</li>
        <li>right:右对齐</li>
        <li>center:居中对齐</li>
    </ul>
    <br>text-transform:文本变形
    <ul>
        <li>uppercase:大写</li>
    </ul>
    <br>font-size:字体大小
    <ul>
        <li>px:像素</li>
        <li>rem:相对倍数</li>
        <li>pt:多用于打印</li>
    </ul>
    <br>font_weight:字重
    <ul>
        <li>bold:粗体</li>
    </ul>
    <br>font-style:字体形式
    <ul>
        <li>italic:斜体</li>
    </ul>
    <br>font-family:字体家族
    <br>opacity:透明度
    <br>background-color:背景颜色
    <br>list-style:列表样式
    <ul>
        <li>none:无样式</li>
        <img src="list-style：none.png" width="400">
    </ul>
    </p>
    <h1>HTML补充内容</h1>
    <input placeholder="这里是文本框内文字" size="24">
    <br>div:块级元素（默认独占一行）
    <br>span:行内元素
    <br>pre:展示原元素
</body>

</html>